<template>
    <div class="peilei">
        <div class="nav1">
            <ul>
                <!-- 用数据循环先写死吧 -->
                <!-- <li>推荐</li> -->
                <router-link :to="{name: 'tuijian', params: {name: 'list'}, query: {id: 1} }" tag="li">推荐</router-link>
                <router-link :to="{name: 'xiangbao', params: {name: 'list'}, query: {id: 2} }" tag="li">箱包</router-link>
                <router-link :to="{name: 'peishi', params: {name: 'list'}, query: {id: 3} }" tag="li">配饰</router-link>
                <router-link :to="{name: 'xiexue', params: {name: 'list'}, query: {id: 4} }" tag="li">鞋靴</router-link>
                <router-link :to="{name: 'fuzhuang', params: {name: 'list'}, query: {id: 5} }" tag="li">服装</router-link>
                <router-link :to="{name: 'shoushi', params: {name: 'list'}, query: {id: 6} }" tag="li">首饰</router-link>
                <router-link :to="{name: 'shoubiao', params: {name: 'list'}, query: {id: 7} }" tag="li">手表</router-link>
                <router-link :to="{name: 'meizhuang', params: {name: 'list'}, query: {id: 8} }" tag="li">美妆</router-link>
                <router-link :to="{name: 'qiuxie', params: {name: 'list'}, query: {id: 9} }" tag="li">球鞋</router-link>
                <li @click="gobackhome">返回首页</li>
            </ul>
        </div>
        <div class="list">
            <!-- 用动态的数据加载 -->
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
import tuijian from '@/components/Mall/tuijian'
export default {
  name: 'pinlei',
  components: {tuijian},
  methods: {
    gobackhome () {
      this.$router.history.push('/home')
    }
  },
  computed: {
    listid () {
      return this.$route.query.id
    }
  }
}
</script>

<style lang='scss'>
.nav1{
    height: 100%;
    width: 70px;
    background: #F5F5F5;
    position: fixed;
    float: left;
    ul li{
        text-align: center;
        font-size: 17px;
        line-height: 56px;
        height: 56px;
    }
}
.list{
    margin-left: 70px;
    height: 100%;
    float: left;
    // background: #FF7043;
    width: 300px;
    overflow-x: hidden;
    flex: 1;
}
</style>
